import React from "react";
import { connect } from 'react-redux'
import { TopWapper, TopicListItem } from '../style'
import { v4 as uuid } from 'uuid'
class ListItem extends React.Component {
  render() {
    return (
      <>
        <TopWapper>
          {
            this.props.TopList.map((item) => (
              <TopicListItem key={uuid()}>
                <img src={item.get('imgUrl')} alt="" />
                <h4>{item.get('title')}</h4>
              </TopicListItem>
            ))
          }
        </TopWapper>
      </>
    )
  }
}

const mapState = (state) => ({
  TopList: state.getIn(['content', 'TopList'])
})

const mapDispatch = (dispatch) => ({

})

export default connect(mapState, mapDispatch)(ListItem)